<template>
  <div>
    <el-row>
      <el-col :span="22">
        <div class="sec-title">试卷模板管理</div>
      </el-col>
      <el-col :span="2">
        <div>
          <i class="el-icon-plus sec-blue"></i>
          <el-button @click="saveBefore" type="text">新增</el-button>
        </div>
      </el-col>
    </el-row>
    <!-- 筛选条件 -->
    <el-form
      :inline="true"
      :model="queryParams"
      class="demo-form-inline"
    >
      <el-form-item label="创建人">
        <el-input
          v-model="queryParams.accountName"
          placeholder="创建人"
        ></el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="searchTemplate"
        >查询</el-button>
      </el-form-item>
    </el-form>
    <!-- 表格 -->
    <el-table
      :data="templates"
      height="590"
      @row-click="callbackSelectTemplate"
    >
      <el-table-column
        prop="templateId"
        label="模板编号"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="templateName"
        label="模板名称"
        width="180"
      >
      </el-table-column>
      <el-table-column
        prop="paperType"
        label="试卷类型"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="paperScore"
        label="试卷分数"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="problems"
        label="题目总数"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="limitTime"
        label="限制时间"
        width="170"
      >
      <template slot-scope="scope">
        {{ parseTime(scope.row.limitTime )}}
      </template>
      </el-table-column>
      <el-table-column
        prop="winScore"
        label="通过分数"
        width="170"
      >
      </el-table-column>
      <el-table-column
        prop="accountName"
        label="创建人"
        width="170"
      >
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
    >
    </el-pagination>
    <!-- 新增试卷模板 -->
    <el-drawer
    :title="isEdit ? '修改模板' : '新增模板'"
    :visible.sync="changeTemplateKey"
    direction="rtl">
    <el-form :model="editTemplate" label-width="80px">
        <el-form-item label="模板编号">
            <el-input v-model="editTemplate.templateId"></el-input>
        </el-form-item>
        <el-form-item label="模板名称">
            <el-input v-model="editTemplate.templateName"></el-input>
        </el-form-item>
        <el-form-item label="试卷名称">
            <el-input v-model="editTemplate.paperName"></el-input>
        </el-form-item>
        <el-form-item label="试卷类型">
            <el-select v-model="editTemplate.paperType" placeholder="请选择试卷类型">
                <el-option label="文化常识" value="1"></el-option>
                <el-option label="企业文化" value="2"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="试卷分数">
            <el-input v-model="editTemplate.paperScore"></el-input>
        </el-form-item>
        <el-form-item label="题目总数">
            <el-input v-model="editTemplate.problems"></el-input>
        </el-form-item>
        <el-form-item label="限制时间">
            <el-input v-model="editTemplate.limitTime"></el-input>
        </el-form-item>
        <el-form-item label="通过分数">
            <el-input v-model="editTemplate.winScore"></el-input>
        </el-form-item>
        <el-form-item>
        <el-button type="primary" @click="submitChange">确定</el-button>
        <el-button>取消</el-button>
    </el-form-item>
    </el-form>
    </el-drawer>
  </div>
</template>

<script>
import { queryPaperTemplates, savePaperTemplate, editPaperTemplate, deletePaperTemplate } from '@/api/system/system.js'
export default {
  data() {
    return {
      isShowInfo: false,
      changeTemplateKey: false,
      isEdit: false,
      activities: [],
      editTemplate: {
        templateId: '',
        templateName: '',
        paperName: '',
        paperScore: '',
        paperType: '',
        limitTime: '',
        winScore: ''
      },
      current: 1,
      pageSize: 10,
      total: 0,
      templates: [],
       queryParams: {
          accountName: '',
          current: 1,
          pageSize: 10
        }
    }
  },
  mounted() {
    this.searchTemplate()
  },
  computed: {
    parseTime() {
        return function(time) {
          return time / 1000 / 60 + '分钟'
        }
    }
  },
  methods: {
    async searchTemplate() {
        const { data: res } = await queryPaperTemplates(this.queryParams)
        if (res.code === 200) {
            this.templates = res.data.pages.records
            this.total = res.data.pages.total
        }
    },
    saveBefore() {
        this.changeTemplateKey = true
        this.isEdit = false
        this.editTemplate = {}
    },
    editBefore(row) {
      // 
      this.editTemplate = row
      this.isEdit = true
      this.changeTemplateKey = true
   },
   async submitChange() {
    if (this.isEdit) {
        // 修改试卷模板
        await editPaperTemplate(this.editTemplate)
    } else {
        // 新增试卷模板
        await savePaperTemplate(this.editTemplate)
    }
    this.changeTemplateKey = false
    this.searchTemplate()
   },
   async deleteHandle(row) {
    //删除模板
    await deletePaperTemplate(row.templateId)
    this.searchTemplate()
   },
   callbackSelectTemplate(row) {
    this.$emit('selectTemplate', row)
   }
  }
}
</script>

<style lang="css" scoped>
.sec-blue {
  color: #409eff;
}
.sec-title {
  font-size: 18px;
  font-weight: 700;
}
</style>